checkLogin()
render()

async function getData() {
    const res = await axios({
        url: '/dashboard',
        method: 'GET',

    })
    console.log('学生渲染数据', res)
    // const year = res.data.year
    const { overview, year, salaryData, groupData } = res.data
    // const salaryData = res.data.salaryData
    console.log(res)
    // console.log(salaryData)
    renderOverview(overview)
    renderSalaryLineChart(year)
    renderClassSalaryPieChart(salaryData)
    renderClassGroupSalaryBarChart(groupData)
}
function renderOverview(data) {
    Object.keys(data).forEach(ele => {
        document.querySelector(`.${ele}`).innerHTML = data[ele]
    })
}

getData()
function renderClassGroupSalaryBarChart(groupData) {
    const myChart = echarts.init(document.querySelector('#lines'))
    const option = {
        grid: {
            left: 70,
            right: 80,
            top: 30,
            bottom: 30
        },
        xAxis: {
            type: 'category',
            data: groupData[1].map(item => item.name),
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                }
            },
            axisLabel: {
                show: true,
                color: '#999',
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        tooltip: {},     //提示框   然后加name  就可以了
        series: [
            {
                name: '期望薪资',
                data: groupData[1].map(item => item.hope_salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#43d6a1'
                        }, {
                            offset: 1, color: 'rgba(196,242,226,0.2)'
                        }],
                        global: false
                    },
                },
            },
            {
                name: '就业薪资',
                data: groupData[1].map(item => item.salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#4fa2ee'
                        }, {
                            offset: 1, color: 'rgba(205,228,250,0.4)'
                        }],
                        global: false
                    },
                },
            }
        ]
    };
    myChart.setOption(option)

    const btns = document.querySelector('#btns')
    btns.addEventListener('click', (e) => {
        if (e.target.classList.contains('btn')) {
            btns.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
             const index = e.target.innerText
            const data = groupData[index]
            option.xAxis.data = data.map(v => v.name)
            option.series[0].data = data.map(v => v.hope_salary)
            option.series[1].data = data.map(v => v.salary) 
            myChart.setOption(option)
        }
    })
}
function renderClassSalaryPieChart(salaryData) {
    const myChart = echarts.init(document.querySelector('#salary'));
    const option = {
        title: {
            text: '班级薪资分布',
            left: '10',
            top: '15'
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                name: '班级薪资分布',
                type: 'pie',
                radius: ['55%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: salaryData.map(item => {
                    return {
                        value: item.g_count + item.b_count,
                        name: item.label
                    }
                })
                /* [
                   
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ] */
            }
        ]
    };
    myChart.setOption(option)
}



function renderSalaryLineChart(year) {
    console.log(year)
    const myChart = echarts.init(document.querySelector('#line'));
    const option = {
        title: {
            text: '2022全学科薪资走势',
            left: '12',
            top: '15'
        },
        legend: {    //图例
            data: ['薪资']
        },
        tooltip: {
            trigger: 'axis'     //触发方式切换到轴
        },
        grid: {
            top: '20%'
        },
        xAxis: {
            type: 'category',   //x轴类型
            data: year.map(ele => ele.month),
            axisLine: {     //X轴线样式
                lineStyle: {
                    //width:8,
                    color: 'teal',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',     //Y轴类型
            splitLine: {
                lineStyle: {           //水平线样式
                    color: ['skyblue', 'pink', 'red'],
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                data: year.map(ele => ele.salary),
                type: 'line',
                name: '薪资',
                smooth: true,             //平滑曲线
                symbolSize: '10',     //标识点大小
                lineStyle: {           //线条样式
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#499eee',   //0处颜色
                        }, {
                            offset: 1, color: '#5c75f0'   //100%颜色
                        }],
                        global: false   //缺省为 false
                    },
                    width: 8
                },
                areaStyle: {          //区域填充颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,            //从上到下
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#499eee'   //0%颜色
                        }, {
                            offset: 1, color: 'rgba(255,255,255,0)'
                        }],
                        global: false   //缺省为 false
                    }
                }

            }
        ]
    };
    myChart.setOption(option)
}
